<template>
	<view class="w-time-picker">
		<view class="w-time-days">
			<scroll-view scroll-x>
				<view class="w-time-scroll">
					<view class="w-time-day" :style="{'color':tabIndex==index?theme:'#333','border-color':tabIndex==index?theme:'#ddd'}" v-for="(day,index) in dayList" :key="index" @tap="toggleIndex(day,index)">
						<view class="w-time-week">{{day.week}}</view>
						<view class="w-time-date">{{day.month}}/{{day.day}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="w-time-body">
			<scroll-view scroll-y class="w-time-list-scroll">
				<view class="w-time-list">
					<view class="w-time-item" :style="{'color':itemIndex==index?theme:'#333','border-color':itemIndex==index?theme:'#ddd'}" :class="{'w-time-item-active':!item.disabled}" v-for="(item,index) in timeList" :key="index" @tap="toggleItem(item,index)">{{item.label}}</view>
				</view>
			</scroll-view>
		</view>
<!-- 		 <view class="w-time-footer">
			<view class="w-time-cancel w-time-btn" @tap="hide">取消</view>
			<view class="w-time-sure w-time-btn" :style="{'background-color':theme}" @tap="submit">确定</view>
		</view> -->
	</view>
</template>

<script>
	let _this=null;
	export default {
		props:{
			afterDays:{
				type:[String,Number],
				default:7
			},
			startHour:{
				type:[String,Number],
				default:9
			},
			endHour:{
				type:[String,Number],
				default:18
			},
			step:{
				type:[String,Number],
				default:30
			},
			afterHours:{
				type:[String,Number],
				default:0
			},
			theme:{
				type:String,
				default:"#f17503"
			}
		},
		data() {
			return {
				dayList:[],
				timeList:[],
				tabIndex:0,
				itemIndex:-1,
				showTimePicker:false,
				time:"",
				doctorpaib:[]
			}
		},
		created(){	
			_this=this;
			_this.initPicker();
			_this.initHours();
		},
		methods:{
			hide(){
				_this.showTimePicker=false;
				_this.$emit("cancel");
			},
			show(){
				_this.showTimePicker=true;
			},
			submit(){
				if(_this.time!=""){
					let tabItem=_this.dayList[_this.tabIndex];
					let result=tabItem.year+"-"+tabItem.month+"-"+tabItem.day+" "+_this.time.label+":00";
					_this.$emit("confirm",result);
					_this.showTimePicker=false;
				}
			},
			toggleIndex(item,index){
				if(!uni.getStorageSync("doctorpaib").zao){
					this.$api.msg('请选择预约地点');
					return false;
				}
				_this.tabIndex=index;
				_this.itemIndex=-1;
				_this.initHours(!item.isToday,item);
			},
			toggleItem(item,index){
				if(!item.disabled){
					_this.itemIndex=index;
					_this.time=item;
					let tabItem=_this.dayList[_this.tabIndex];
					let result=tabItem.year+"-"+tabItem.month+"-"+tabItem.day+" "+_this.time.label+":00";
					_this.$emit("confirm",result);
					_this.showTimePicker=false;
				}
			},
			forMatNumber(n){
				return n<10?'0'+n:n
			},
			initHours(flag,item){
				let aDate=new Date();
				let curHour=aDate.getHours();
				let weekList=["周日","周一","周二","周三","周四","周五","周六"];
				if(item){
					console.log(item.week);
					if(item.week=='周一'){var ts=1;}
					if(item.week=='周二'){var ts=2;}
					if(item.week=='周三'){var ts=3;}
					if(item.week=='周四'){var ts=4;}
					if(item.week=='周五'){var ts=5;}
					if(item.week=='周六'){var ts=6;}
					if(item.week=='周日'){var ts=7;}
				}else{
					var ts=aDate.getDay();
				}
				if(!uni.getStorageSync("doctorpaib").zao){
					return false;
				}
				var zao=JSON.parse(uni.getStorageSync("doctorpaib").zao);
				var xia=JSON.parse(uni.getStorageSync("doctorpaib").xia);
				var ds=ts-1;
				// console.log(zao[ds]);
				// console.log(xia[ds]);
				_this.timeList=[];
				for(let j=_this.startHour*1;j<_this.endHour*1;j++){
					for(let k=0;k<60;k+=_this.step){
						console.log(_this.forMatNumber(j));
							if(_this.forMatNumber(j)<12 && zao[ds]==1){
								_this.timeList.push({
									label:_this.forMatNumber(j)+":"+_this.forMatNumber(k),
									disabled:false
								});
							}else if(_this.forMatNumber(j)>=12 && xia[ds]==1){
								_this.timeList.push({
									label:_this.forMatNumber(j)+":"+_this.forMatNumber(k),
									disabled:false
								});
							}else{
								_this.timeList.push({
									label:_this.forMatNumber(j)+":"+_this.forMatNumber(k)+' 满',
									disabled:true
									//disabled:curHour+_this.afterHours<j?false:true
								});
							}
					}
				};
			},
			initPicker(){
				let aDate=new Date();
				let weekList=["周日","周一","周二","周三","周四","周五","周六"];
				_this.dayList.push({
					year:aDate.getFullYear(),
					month:_this.forMatNumber(aDate.getMonth()+1),
					day:_this.forMatNumber(aDate.getDate()),
					week:weekList[aDate.getDay()],
					isToday:true
				})
				for(let i=1;i<_this.afterDays*1;i++){
					aDate.setDate(aDate.getDate()+1);
					_this.dayList.push({
						year:aDate.getFullYear(),
						month:_this.forMatNumber(aDate.getMonth()+1),
						day:_this.forMatNumber(aDate.getDate()),
						week:weekList[aDate.getDay()],
						isToday:false
					})
				};
			}
		}
	}
</script>

<style lang="scss">
	
	.w-time-picker{
		position: absolute;
		left:0;
		top:0;
		width: 100%;
		z-index: 1;
		background-color:#f5f5f5;
		display: flex;
		flex-direction: column;
		transition: all 0.3s ease;
		.w-time-days{
			overflow: hidden;
			padding:12upx 0upx;
			padding-left: 28upx;
			background-color: #fff;
			.w-time-scroll{
				white-space: nowrap;
			}
			.w-time-day{
				display: inline-block;
				width: 146upx;
				text-align: center;
				border:solid 1px #ddd;
				margin-right:18px;
				border-radius: 6upx;
				padding:10upx 0;
				color:#333;
				.w-time-week{
					font-size: 28upx;
					line-height: 1;
				}
				.w-time-date{
					font-size: 24upx;
					line-height: 1;
					margin-top: 10upx;
				}
			}
			.w-time-day-active{
				color:#f00;
				border-color:#f00;
			}
		}
		.w-time-body{
			flex:1;
			overflow: hidden;
			.w-time-list-scroll{
				height: 100%;
			}
			.w-time-list{
				display: flex;
				flex-wrap: wrap;
				padding:20upx 10upx;
			}
			.w-time-item{
				width: 20%;
				height: 80upx;
				line-height: 80upx;
				margin:0 18upx 30upx;
				text-align: center;
				border:solid 1px #ddd;
				background: #ddd;
				border-radius: 6upx;
				font-size: 28upx;
				transition: all 0.3s ease;
			}
			.w-time-item-active{
				background-color: #fff;
			}
		}
		.w-time-footer{
			height: 88upx;
			display: flex;
			background-color: #fff;
			.w-time-btn{
				flex:1;
				text-align: center;
				line-height: 88upx;
				font-size: 30upx;
			}
			.w-time-sure{
				background-color: #f00;
				color:#fff;
			}
		}
	}
</style>
